<!-- 表单属性组件 -->
<template>
  <div class="form-config-container">
    <el-form label-position="left">
      <el-form-item label="组件尺寸">
        <el-radio-group v-model="data.size">
          <el-radio-button label="medium">
            中等
          </el-radio-button>
          <el-radio-button label="small">
            较小
          </el-radio-button>
          <el-radio-button label="mini">
            迷你
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标签对齐">
        <el-radio-group v-model="data.labelPosition">
          <el-radio-button label="left">
            左
          </el-radio-button>
          <el-radio-button label="right">
            右
          </el-radio-button>
          <el-radio-button label="top">
            顶部
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="宽度">
        <el-input class="custom_input" v-model="data.labelWidth"></el-input>
      </el-form-item>

      <el-form-item label="表单名称">
        <el-input class="custom_input" v-model="data.formName"></el-input>
      </el-form-item>
      <el-form-item label="表单序列号">
        <el-input
          class="custom_input"
          v-model="data.formNumber"
          :disabled="true"
        ></el-input>
      </el-form-item>

      <el-form-item label="自定义样式">
        <el-input
          class="custom_input"
          type="textarea"
          :rows="2"
          v-model="data.customStyle"
        ></el-input>
      </el-form-item>
      <el-form-item label="自定义Class">
        <el-input
          class="custom_input"
          v-model="data.customClass"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="JS增强">
        <el-tooltip class="item" effect="dark" placement="top-start">
          <div slot="content">
            在JS增强输入框里除了可以用挂载到window中的全局变量之外，
            <br />还可以用我们给你封装好的几个变量以及方法， <br />
            他们分别如下 <br />
            vm Vue实例，可以调用Vue的一系列的方法，例如 vm.$nextTick();
            <br />api 封装了一下api，具体如下 <br />
            api.getFormData(key) <br />setFormData(key, value) 设置form表单的值
            show(key) 显示一个或多个组件 <br />hide(key) 隐藏一个或多个组件
            api.validate()校验表单 <br />api.resetFields() 重置表单
          </div>

          <el-input
            class="custom_input"
            v-model="data.jsExpand"
            type="textarea"
            :rows="6"
            clearable
          ></el-input>
        </el-tooltip>
      </el-form-item>

      <el-form-item label="外部js资源">
        <el-input
          class="custom_input"
          type="textarea"
          :rows="6"
          v-model="data.customJs"
        ></el-input>
      </el-form-item>

      <el-form-item label="是否查看">
        <el-checkbox
          v-model="data.disable"
          @change="changeDisable"
        ></el-checkbox>
      </el-form-item>
      <el-form-item label="显示批注">
        <el-checkbox
          v-model="data.showAnnotation"
          @change="changeShowAnnotation"
        ></el-checkbox>
      </el-form-item>

      <el-form-item label="布局" label-width="50px">
        <el-col :span="30">
          <el-radio-group v-model="radio1" @change="layOutChange($event)">
            <el-radio-button label="24">单列</el-radio-button>
            <el-radio-button label="12">两列</el-radio-button>
            <el-radio-button label="8">三列</el-radio-button>
            <el-radio-button label="6">四列</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MakingForm from "./Container.vue";

export default {
  props: ["data", "form"], // 父组件传递的data
  components: {
    MakingForm
  },
  mounted() {},

  data() {
    return {
      radio1: 12
    };
  },
  methods: {
    getA() {},
    changeDisable(disabled) {
      this.changeDisableFun(disabled);
    },
    changeShowAnnotation(disabled) {
      this.changeShowAnnotationFun(disabled);
    },
    changeDisableFun: function(val) {
      var list = this.form.list;
      this.changeDisableAction(list, val);
    },
    changeShowAnnotationFun: function(val) {
      var list = this.form.list;
      this.changeShowAnnotationAction(list, val);
    },
    changeShowAnnotationAction: function(list, val) {
      list.forEach(item => {
        if (item.options) {
          item.options.showAnnotation = val;
        } else {
          list = item;
          this.changeDisableAction(list, val);
        }

        if (item.tabColumns) {
          list = item.tabColumns;
          this.changeShowAnnotationAction(list, val);
        }
        if (item.tableColumns) {
          list = item.tableColumns;
          this.changeShowAnnotationAction(list, val);
        }
      });
    },
    changeDisableAction: function(list, val) {
      list.forEach(item => {
        if (item.options) {
          item.options.disabled = val;
        } else {
          list = item;
          this.changeDisableAction(list, val);
        }

        if (item.tabColumns) {
          list = item.tabColumns;
          this.changeDisableAction(list, val);
        }
        if (item.tableColumns) {
          list = item.tableColumns;
          this.changeDisableAction(list, val);
        }
      });
    },
    layOutChange: function(val) {
      this.$emit("getjson", val);
    },
    childMethod() {}
  },
  watch: {
    data() {
      this.$nextTick(_ => {});
    },
    disable(val, oldVal) {}
  }
};
</script>
<style type="text/css">
.custom_input {
  width: auto !important;
}
</style>
